<template>
  <div id="saleMen">
    <!-- <h1>{{initPayType}}</h1> -->
    <el-menu
      style="margin-top:-14px;margin-bottom:20px"
      class="el-menu-demo"
      mode="horizontal"
      background-color="#545c64"
      text-color="#fff"
      active-text-color="#ffd04b"
    >
      <el-menu-item style="color:#009688"
        ><i class="el-icon-s-home"></i>修改订单</el-menu-item
      >
      <!-- <el-menu-item index="/salesMenSystem/xcustomers/xAddCustomers"><i class="el-icon-user"></i>新增客户</el-menu-item>
  <el-menu-item index="/salesMenSystem/xcustomers/xCustomersList"><i class="el-icon-s-operation"></i>我的客户列表</el-menu-item> -->
    </el-menu>
    <div v-if="myOneOrdersData[0]">
<div class="flex">
      <div class="demo-input-suffix">
        <label for="">订单_Id:</label
        ><el-input
          v-if="myOneOrdersData[0]"
          readonly
          prefix-icon="el-icon-user"
          v-model="myOneOrdersData[0]._id"
        >
        </el-input>
      </div>
      <div class="demo-input-suffix">
        <label for="">保险类别:</label
        ><el-input
          readonly
          prefix-icon="el-icon-timer"
          v-model="myOneOrdersData[0].productsId.classesId.classes"
        >
        </el-input>
      </div>
    </div>
    <!-- 第二行 -->
    <div class="flex">
      <div class="demo-input-suffix">
        <label for="">订单流水号:</label
        ><el-input
          prefix-icon="el-icon-user"
          v-model="myOneOrdersData[0].flowNum"
          readonly
        >
        </el-input>
      </div>
      <div class="demo-input-suffix">
        <label for="">产品名:</label
        ><el-input
          disabled
          prefix-icon="el-icon-timer"
          v-model="myOneOrdersData[0].productsId.name"
        >
        </el-input>
      </div>
    </div>
    <!-- 第三行 -->
    <div class="flex">
      <div class="demo-input-suffix">
        <label for="">收件人名字:</label
        ><el-input
          placeholder="价格"
          prefix-icon="el-icon-timer"
          v-model="myOneOrdersData[0].ordersName"
        >
        </el-input>
      </div>
      <div class="demo-input-suffix">
        <label for="">收件人电话:</label
        ><el-input
          placeholder="保险名称"
          prefix-icon="el-icon-user"
          v-model="myOneOrdersData[0].ordersPhone"
        >
        </el-input>
      </div>
    </div>
    </div>
    
    <el-button
      type="primary"
      @click="modifyOneOrders()"
      style="backgroundColor:#009688;width:190px;margin-right:850px"
      >立即修改</el-button
    >
  </div>
</template>

<script>
import { createNamespacedHelpers } from "vuex";
const { mapState, mapMutations, mapActions } = createNamespacedHelpers(
  "orders"
);
export default {
  data() {
    return {};
  },
  mounted() {
    // //  this.getOrdersByOrdersId({_id:localStorage.oneOrdersId});  // 所点击的订单id传过去
    this.getOrdersByOrdersId({ _id: localStorage.oneOrdersId }); // 所点击的订单id传过去
  },
  computed: {
    ...mapState(["oneOrdersData"]),
    myOneOrdersData: {
      get() {
        return this.oneOrdersData;
      },
      set(val) {
        this.setOneOrdersData(val);
      },
    },
  },
  methods: {
      ...mapMutations(['setOneOrdersData']),
    ...mapActions(["getOrdersByOrdersId", "oneModifyOrders"]),
   async modifyOneOrders() {
     let data = await this.oneModifyOrders();  // 调用修改 信息，值在仓库 id在本地 ，所以不用传
     if(data.status){
       alert('修改成功');
     }
    },
  },
};
</script>

<style lang="scss" scoped>
#saleMen .demo-input-suffix .el-input[data-v-173c8412],
#saleMen {
  width: 600px;
  .flex {
    display: flex;
  }
}
#saleMen {
  width: 100%;
  // border: 1px solid red;
  // padding-right: 150px;
  .demo-input-suffix {
    display: flex;
    margin-top: 10px;
    // width: 300px;
    label {
      width: 150px;
      line-height: 36px;
      display: block;
      text-align: right;
      padding-right: 20px;
    }
    .el-input,
    .el-radio {
      width: 300px;
    }
  }
  .el-button {
    // margin-right: 130px;
    // margin-top: 20px;
    margin: 20px auto;
    margin-left: 230px;
  }
}

.el-checkbox-group {
  display: flex;
}
</style>
